<template>
  <div class="font-inter bg-gray-100 text-gray-800 min-h-screen flex overflow-hidden">
    <!-- 侧边栏 -->
    <aside id="sidebar" class="w-64 bg-white border-r border-gray-200 h-screen flex-shrink-0 hidden md:block transition-all duration-300">
      <div class="p-5 border-b border-gray-200">
        <h1 class="text-xl font-bold text-primary flex items-center gap-2">
          <i class="fas fa-home"></i>
          <span>房屋出租管理系统</span>
        </h1>
      </div>
      
      <nav class="p-4 space-y-1">
        <p class="text-xs font-medium text-gray-400 uppercase px-4 mb-2">主菜单</p>
        
        <a href="#" class="sidebar-item">
          <i class="fas fa-tachometer-alt w-5 text-center"></i>
          <span>仪表盘</span>
        </a>
        
        <a href="#" class="sidebar-item active">
          <i class="fas fa-building w-5 text-center"></i>
          <span>房屋管理</span>
        </a>
        
        <a href="#" class="sidebar-item">
          <i class="fas fa-users w-5 text-center"></i>
          <span>用户管理</span>
        </a>
        
        <a href="#" class="sidebar-item">
          <i class="fas fa-file-alt w-5 text-center"></i>
          <span>订单管理</span>
        </a>
        
        <a href="#" class="sidebar-item">
          <i class="fas fa-cog w-5 text-center"></i>
          <span>系统设置</span>
        </a>
      </nav>
    </aside>
    
    <!-- 主内容区 -->
    <main class="flex-1 flex flex-col overflow-hidden">
      <!-- 顶部导航 -->
      <header class="bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between">
        <div class="flex items-center gap-4">
          <button id="sidebar-toggle" class="md:hidden p-2 rounded-lg hover:bg-gray-100">
            <i class="fas fa-bars text-lg"></i>
          </button>
          <h2 class="text-lg font-semibold">房屋管理</h2>
        </div>
        
        <div class="flex items-center gap-4">
          <button class="p-2 rounded-full hover:bg-gray-100 relative">
            <i class="fas fa-bell text-gray-600"></i>
            <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
          </button>
          
          <div class="flex items-center gap-2">
            <img src="https://via.placeholder.com/36x36" alt="Avatar" class="w-9 h-9 rounded-full">
            <span class="font-medium">管理员</span>
          </div>
        </div>
      </header>
      
      <!-- 内容区域 -->
      <div class="flex-1 overflow-y-auto p-6">
        <!-- 操作栏 -->
        <div class="flex flex-col sm:flex-row gap-4 mb-6">
          <button id="add-house-btn" class="btn btn-primary w-full sm:w-auto">
            <i class="fas fa-plus"></i>
            <span>新增房屋</span>
          </button>
          
          <div class="relative flex-1">
            <input type="text" placeholder="搜索房屋..." class="form-input pl-10">
            <i class="fas fa-search absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
          </div>
          
          <select class="form-input w-full sm:w-32">
            <option>全部状态</option>
            <option>已上架</option>
            <option>已下架</option>
          </select>
        </div>
        
        <!-- 房屋列表 -->
        <div class="card">
          <div class="overflow-x-auto">
            <table class="w-full">
              <thead class="bg-gray-50">
                <tr>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">房屋信息</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">价格</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">状态</th>
                  <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">操作</th>
                </tr>
              </thead>
              <tbody class="divide-y divide-gray-200">
                <!-- 房屋项目示例 -->
                <tr>
                  <td class="px-6 py-4">
                    <div class="flex items-center gap-4">
                      <img src="https://via.placeholder.com/60x60" alt="House" class="w-15 h-15 rounded-lg object-cover">
                      <div>
                        <div class="font-medium">豪华公寓</div>
                        <div class="text-sm text-gray-500">北京市朝阳区</div>
                      </div>
                    </div>
                  </td>
                  <td class="px-6 py-4">
                    <div class="font-medium">¥5000/月</div>
                  </td>
                  <td class="px-6 py-4">
                    <span class="px-2 py-1 bg-success/10 text-success text-xs font-medium rounded-full">已上架</span>
                  </td>
                  <td class="px-6 py-4">
                    <div class="flex items-center gap-2">
                      <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg">
                        <i class="fas fa-edit"></i>
                      </button>
                      <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg 下架-btn" data-id="1">
                        <i class="fas fa-ban"></i>
                      </button>
                      <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-lg" data-id="1">
                        <i class="fas fa-trash"></i>
                      </button>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </main>
  </div>
</template>

<script>
export default {
  name: 'AdminPanel'
}
</script>

<style scoped>
/* Tailwind 配置 */
@import 'https://cdn.tailwindcss.com';

/* 自定义工具类 */
.content-auto {
  content-visibility: auto;
}

.sidebar-item {
  @apply flex items-center gap-3 px-4 py-3 text-gray-600 hover:bg-primary/10 hover:text-primary rounded-lg transition-all duration-200;
}

.sidebar-item.active {
  @apply bg-primary/10 text-primary font-medium;
}

.btn {
  @apply px-4 py-2 rounded-lg font-medium transition-all duration-200 flex items-center gap-2;
}

.btn-primary {
  @apply bg-primary text-white hover:bg-primary/90;
}

.btn-success {
  @apply bg-success text-white hover:bg-success/90;
}

.btn-danger {
  @apply bg-danger text-white hover:bg-danger/90;
}

.btn-outline {
  @apply border border-gray-300 text-gray-700 hover:bg-gray-100;
}

.card {
  @apply bg-white rounded-xl shadow-sm border border-gray-200 overflow-hidden;
}

.form-input {
  @apply w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/20 focus:border-primary outline-none transition-all;
}

.form-label {
  @apply block text-sm font-medium text-gray-700 mb-1;
}

/* 颜色变量定义 */
:root {
  --primary: #165DFF;
  --secondary: #36CFC9;
  --success: #52C41A;
  --warning: #FAAD14;
  --danger: #FF4D4F;
}
</style>